Programmeren 5

JavaScript - Events revisited

Doelstelling

1. Het indrukken van een toets, het aanklikken van een knop met de muis, het openen of sluiten van een venster, of het verstrijken van een bepaalde hoeveelheid tijd, het zijn allemaal events. Het is aan de programmeur om op te geven welke code moet worden uitgevoerd als de gebeurtenis optreedt. M.a.w. de programmeur moet een "event handler" specificeren. Dankzij het event-model kunnen we in een taal als C# en Java programma's voor Windows schrijven. Maar ook JavaScript ondersteunt events.
2. Na deze les heb je inzicht in de Event flow, het volledige process vanaf het afvuren ervan tot de afhandeling ervan. De flow bestaat uit:
   1. De Event Listener bestaat uit één of meerdere regels code die gekoppeld zijn een object. Dat wordt aangeduid als de Event Target, dat wacht tot een Event gebeurt. Een hyperlink een ingebouwde listener voor het click Event, die moet je zelf niet schrijven die zit er van te voren al in ingebouwd. Je kan ook zelf Event Listeners registreren voor één of meerdere objecten.
   2. Het Event is zeer specifiek: een click op een knop, een mouseover op een foto, een load van de pagina, een readyState van een XMLHttpRequest call.
   3. De Event Handler is het programma dat uitgevoerd wordt nadat het event afgevuurd ist. Ook hier heb je ingebouwde event Handlers die je zelf niet hoeft te programmeren. Een click op een hyperlink haalt de gevraagde url uit het href attribuut, maar je kan ook een eigen Event Handler maken.

Leerpad

1. Een ander fenomeen is Event stream. Daar lees je meer over op JS - Eventstroom.
2. JS - Overzicht Events
3. JavaScript inline event handling
4. JavaScript externe event handling
   1. Tradioneel event registratie model
   2. De JavaScript HTML DOM EventListener
5. JS - Eventstroom

Opdracht

1. In de Marquee gebruikten we inline events. Wijzig de script en vervang de inline events door DOM Eventlisteners.
2. Maak de oplossing lokaal in Visual Studio en synhroniseer ze met Bitbucket.